<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .first {
            font-size: 20pt;
            color: red;
            font-weight: bold;
        }

        .color1 {
            color: blue;
        }

        p.color2 {
            color: green;
        }
    </style>

    <style>
        span.classy {
            background-color: DodgerBlue;
        }
    </style>
</head>

<body>

    <!-- CSS选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors -->

    <!-- 类选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors -->
    <!-- 在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。 -->

    <h1 class="first">Welcome to BookYourHotel website.</h1>
    <h2 class="first">This site is very user friendly.</h2>
    <p class="first">This site gives information of all the hotels in USA.</p>
    <p class="first">You can book your hotel while sitting in your room.</p>


    <h4 class="color1">Welcome to BookYourHotel website.</h4>
    <p class="color1">Provides online booking of domestic and international hotels.</p>
    <p class="color2">Avail great discounts and offers</p>

    <span class="classy">Here's a span with some text.</span>
    <span>Here's another.</span>

</body>

</html>